<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta name="keywords" content="xx,xx,xx" />
    <meta name="description" content="yyyyyyy" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta property="qc:admins" content="70003766576320416375" />
    <meta name="format-detection" content="telephone=no">
    <title>朋友圈</title>
    <link rel="stylesheet" href="../css/base/jquery-ui-1.10.3.css" type="text/css">
    <link rel="stylesheet" href="../plugin/bootstrap-3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/inform.css">
    <link rel="stylesheet" href="../css/base/common.css">
    <!--<script src="../../senmiao-pc/js/common/less.min.js"></script>-->

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<style>
    @media (max-width: 768px){
        .col-sm-6 {
            width: 50%;
            float: left;
        }
    }
    .masonry{
        margin-top: 5px;
    }
      .masonry>div{
        padding: 0 5px;
    }
      .masonry>div>a{
        margin-bottom: 5px;
    }
      .masonry>div:hover{
        opacity: 0.8;
    }
    .footer .tabs>li{
        margin-left: 1%;
    }

</style>
</head>
<body>
<div class="container-fluid">
    <!--header start-->
    <div class="row header personal-header friend-header">
        <img src="../images/friend-head.png">
    </div>
    <!--header end-->

    <!--content start-->
    <div class="row content">
        <div class="friends-content-top">
            <div class="nav">
                <ul>
                    <li>
                        <a href="#">
                            <img src="../images/wechat-say.png">
                             <b>说说</b>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/job-experience.png">
                             <b>兼职体验</b>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/need.png">
                             <b>需求</b>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/carpooling.png">
                             <b>组团拼车</b>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="friends-content-bottom ">
            <div class="box">
                <div class="box-message">
                    <img src="../images/friend-head.png">
                    <div class="show">
                          <p style="margin-top: 5px;">
                              今天在上海悦华大酒店上班
                              今天在上海悦华大酒店上班
                              今天在上海悦华大酒店上班
                              今天在上海悦华大酒店上班
                              今天在上海悦华大酒店上班
                              今天在上海悦华大酒店上班^_^!
                          </p>
                        <div class="show-picture">
                            <span class="message-left-arrow"><img src="../images/friend-message-arrow.png"></span>
                            <div class="show-content masonry row">
                                <div class="col-sm-6 col-md-3 col-lg-4 item">
                                    <a href="" class="thumbnail">
                                        <img src="../images/shopping-cloth-1.png" alt="服装">
                                    </a>
                                </div>
                                <div class="col-sm-6 col-md-3 col-lg-4 item">
                                    <a href="" class="thumbnail">
                                        <img src="../images/shopping-cloth-1.png" alt="服装">
                                    </a>
                                </div>
                                <div class="col-sm-6 col-md-3 col-lg-4 item">
                                    <a href="" class="thumbnail">
                                        <img src="../images/shopping-cloth-1.png" alt="服装">
                                    </a>
                                </div>
                                <div class="col-sm-6 col-md-3 col-lg-4 item">
                                    <a href="" class="thumbnail">
                                        <img src="../images/shopping-cloth-1.png" alt="服装">
                                    </a>
                                </div>
                                <div class="col-sm-6 col-md-3 col-lg-4 item">
                                    <a href="" class="thumbnail">
                                        <img src="../images/shopping-cloth-1.png" alt="服装">
                                    </a>
                                </div>
                                <div class="col-sm-6 col-md-3 col-lg-4 item">
                                    <a href="" class="thumbnail">
                                        <img src="../images/shopping-cloth-1.png" alt="服装">
                                    </a>
                                </div>
                                <div class="col-sm-6 col-md-3 col-lg-4 item">
                                    <a href="" class="thumbnail">
                                        <img src="../images/shopping-cloth-1.png" alt="服装">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-comment">
                        <h6 align="right" class="good">
                           <a  data-toggle="tooltip" title="点赞" href="#" class="glyphicon  glyphicon-thumbs-up"><span  style="margin-top: -15px;background:#ff7474;" class="badge">9</span></a>
                           <a  data-toggle="tooltip" title="评论" href="javascript:;"  class="glyphicon  glyphicon-comment"></a>
                           <a  data-toggle="tooltip" title="分享" href="#" class="glyphicon  glyphicon-share-alt"></a>
                        </h6>
                        <div class="write-comment" contenteditable="true">
                            <!--<textarea id="textarea"  placeholder="请在此输入评论......"></textarea>-->
                        </div>
                     </div>
                </div>
                <div class="add-say">
                <img src="../images/add-say-button.png" alt=""/>
            </div>
            </div>
    </div>
    </div>
    <!--content end-->

    <!--footer start-->
    <div class="row footer">
         <ul class="tabs">
             <li><a href="../index.html">职位</a></li>
             <li><a href="JavaScript:;" class="friends-active" >朋友圈</a></li>
             <li style="margin-left: 14%"><a href="inform.html">通知</a></li>
             <li ><a href="personal.html">我的</a></li>
         </ul>
    </div>
    <!--footer end-->
</div>
</body>
<script src="../js/common/jquery-2.1.4.min.js"></script>
<script src="../js/index.js"></script>
<script src="../plugin/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<!--<script src="../plugin/masonry-js/masonry.pkgd.min.js"></script>-->
<!--<script src="../plugin/masonry-js/imagesloaded.pkgd.min.js"></script>-->

<script>
    $(function () {

        $("[data-toggle='tooltip']").tooltip();


        /*评论start*/
        $('.good>a:nth-child(2)').click(function(){
            $(this).parent().next().slideToggle(10);
        });
        /*评论end*/
//        $('.masonry').imagesLoaded(function() {
//            $('.masonry').masonry({
//                itemSelector: '.item'
//            });
//        });
    });
</script>

</html>